<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <script src="getJSON.js"></script>
  <body>
    <script>
      window.onload = () => {
        document.querySelectorAll('#chapters a').forEach((a) => {
          a.onclick = (e) => {
            e.preventDefault()
            getJSON(a.href, false).then((text) => {
              document.getElementById('content').innerHTML = text
            })
          }
        })
      }

      const arr = ['1.html','2.html','3.html','4.html']
      const ps = arr.map(path => './book/'+path)
        .map(path => getJSON(path, false))
      console.log(ps)
      Promise.all(ps).then(result => console.log(result))

    </script>

    <table>
      <tr>
        <td style="width: 200px; vertical-align: top">
          <ul id="chapters">
            <li>
              <span><a href="./book/1.html">第1章</a></span>
            </li>
            <li><a href="./book/2.html">第2章</a></li>
            <li><a href="./book/3.html">第3章</a></li>
            <li><a href="./book/4.html">第4章</a></li>
          </ul>
        </td>
        <td style="width: 80%" id="content"></td>
      </tr>
    </table>
  </body>
</html>
